<template>
	<jk-view :loading="showLoading">
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div></div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-save-button v-if="pageType === 'add' || pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveBtnLoading" class="item-gap" :permission-prefix="prefix" @click="onConfirmBtn(0)"></jk-save-button>
					<!--<jk-update-button v-if="pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :permission-prefix="prefix" :loading="saveBtnLoading" class="item-gap" @click="onConfirmBtn(1)"></jk-update-button>-->
					<div v-if="pageType === 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" type="primary" icon="el-icon-edit" size="small" @click="onEditBtn">编辑</jk-button></div>
					<div v-if="pageType !== 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveAndEnableBtnLoading" type="primary" icon="el-icon-document-checked" size="small" @click="onConfirmBtn(2)">保存并启用</jk-button></div>
					<jk-button v-if="(pageType === 'detail' || pageType === 'edit') && ruleForm.auditState === 1" :loading="auditStateLoading" :type="ruleForm.auditState === 1 ? 'warning' : 'success'" class="pointer item-gap" :icon="ruleForm.auditState ? 'el-icon-video-pause' : 'el-icon-video-play'" size="small" @click="onAuditStateChange">{{ ruleForm.auditState === 0 ? '启用': '停用' }}</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="120px" :show-message="false">
				<div ref="box3">
					<div class="flex-between-center margin-bottom-10">
						<el-tag type="primary" effect="plain">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
					</div>
					<el-row ref="box1">
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="区域" prop="workshopId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.workshopName }}</span>
								<jk-select v-else v-model="ruleForm.workshopId" :option-list="workshopList" size="medium" class="width-100-percent" placement="区域" clearable @change="onWorkshopChange" />
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="日期" prop="belongDate">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.belongDate }}</span>
								<el-date-picker v-else v-model="ruleForm.belongDate" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="日期" @change="onDateChange" />
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="班次" prop="scheduleShiftId">
								<span v-if="pageType === 'detail' || ruleForm.id" class="read-only-2">{{ ruleForm.shiftName }}</span>
								<el-select v-else v-model="ruleForm.scheduleShiftId" :disabled="!!ruleForm.id" :clearable="false" placeholder="班次" class="width-100-percent" @change="onScheduleShiftChange">
									<el-option
										v-for="item in scheduleShiftList"
										:key="item.id"
										:label="`${item.shiftName} (${item.beginTime} ~ ${item.endTime})`"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item class="margin-bottom-10" label="备注">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.remark }}</span>
								<el-input v-else v-model="ruleForm.remark" type="textarea" :rows="1" placeholder="" />
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div ref="box2">
					<el-row :gutter="14">
						<el-col :span="24" class="margin-bottom-20">
							<div class="flex-between-center margin-bottom-4">
								<el-tag type="primary" effect="plain">
									<span class="el-icon-close-notification item-gap"></span>
									<span>未打卡({{ ruleForm.noCardPunchedEmpList.length }}人)</span>
								</el-tag>
								<el-button
									v-if="pageType !== 'detail'"
									icon="el-icon-refresh"
									type="primary"
									size="mini"
									:loading="updateBtnLoading"
									:disabled="!ruleForm.workshopId || !ruleForm.belongDate || !ruleForm.shiftId"
									@click="onUpdateBtn"
								>更新数据</el-button>
							</div>
							<jk-table ref="jkTable" border :data="ruleForm.noCardPunchedEmpList">
								<vxe-table-column type="seq" title="序号" align="center" :width="60"></vxe-table-column>
								<vxe-column title="人员" field="empName" width="180" align="left">
									<template slot-scope="scope">
										<div class="flex-between-center">
											<span>{{ scope.row.empName }}</span>
											<el-button v-if="pageType !== 'detail'" size="mini" icon="el-icon-s-flag" type="default" plain @click="onSetAskForLeaveBtn(scope)">标为请假</el-button>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="岗位" align="left" field="postName" :width="100" />
								<vxe-column title="班组" align="left" field="groupName" :width="100" />
								<vxe-column title="上班打卡时间" align="left" field="clockIn" :width="150" />
								<vxe-column title="下班打卡时间" align="left" field="clockOut" :width="150" />
								<!--<vxe-column title="未打卡原因" align="left" field="beLateId" :width="140">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.beLateName }}</span>
											<jk-select v-else v-model="scope.row.beLateId" :option-list="causeList" size="mini"></jk-select>
										</div>
									</template>
								</vxe-column>-->
								<vxe-column title="备注" align="left" field="remark" :width="250">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.remark }}</span>
											<jk-input v-else v-model="scope.row.remark" class="width-100-percent" placeholder="" size="mini"></jk-input>
										</div>
									</template>
								</vxe-column>
							</jk-table>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" class="margin-bottom-20">
							<el-tag type="primary" effect="plain" class="margin-bottom-4">
								<span class="el-icon-bell item-gap"></span>
								<span>迟到早退({{ ruleForm.beLateEmpList.length }}人)</span>
							</el-tag>
							<jk-table ref="jkTable" border :data="ruleForm.beLateEmpList">
								<!--<vxe-column title="操作" :visible="pageType !== 'detail'" width="70" align="center">
									<template slot-scope="scope">
										<el-button size="mini" icon="el-icon-delete" type="text" @click="ruleForm.beLateEmpList.splice(scope.rowIndex, 1)"></el-button>
									</template>
								</vxe-column>-->
								<vxe-table-column type="seq" title="序号" align="center" :width="60"></vxe-table-column>
								<vxe-table-column field="empName" title="人员" align="left" :width="100"></vxe-table-column>
								<vxe-column title="岗位" align="left" field="postName" :width="100" />
								<vxe-column title="上班打卡时间" align="left" field="clockIn" :width="150" />
								<vxe-column title="下班打卡时间" align="left" field="clockOut" :width="150" />
								<!--<vxe-column title="迟到原因" align="left" field="beLateId" :width="140">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.beLateName }}</span>
											<jk-select v-else v-model="scope.row.beLateId" :option-list="causeList" size="mini"></jk-select>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="早退原因" align="left" field="leaveEarlyId" :width="140">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.leaveEarlyName }}</span>
											<jk-select v-else v-model="scope.row.leaveEarlyId" :option-list="causeList" size="mini"></jk-select>
										</div>
									</template>
								</vxe-column>-->
								<vxe-column title="备注" align="left" field="remark" :width="250">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.remark }}</span>
											<jk-input v-else v-model="scope.row.remark" class="width-100-percent" placeholder="" size="mini"></jk-input>
										</div>
									</template>
								</vxe-column>
							</jk-table>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" class="margin-bottom-20">
							<el-tag type="primary" effect="plain" class="margin-bottom-4">
								<span class="el-icon-alarm-clock item-gap"></span>
								<span>请假({{ ruleForm.leaveEmpList.length }}人)</span>
							</el-tag>
							<jk-table ref="jkTable" border :data="ruleForm.leaveEmpList">
								<vxe-table-column type="seq" title="序号" align="center" :width="60"></vxe-table-column>
								<!--<vxe-column title="操作" :visible="pageType !== 'detail'" width="90" align="center">
                                    <template slot="header">
                                        <el-button size="mini" icon="el-icon-plus" type="text" @click="onAddAskForLeaveBtn">添加</el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button v-if="!scope.row.id" size="mini" icon="el-icon-delete" type="text" @click="onDeleteAskForLeaveBtn(scope)"></el-button>
                                        <el-popconfirm v-else title="已有记录确定删除吗？" @confirm="onDeleteAskForLeaveBtn(scope)">
                                            <el-button slot="reference" size="mini" icon="el-icon-delete" type="text"></el-button>
                                        </el-popconfirm>
                                    </template>
                                </vxe-column>-->
								<vxe-table-column field="empName" title="人员" align="left" :width="100">
									<!--<template slot-scope="scope">
										<span v-if="pageType === 'detail'">{{ scope.row.empName }}</span>
										<remote-search-emp-input
											v-else
											size="mini"
											placeholder="人员"
											only-key="empId"
											query-name="empName"
											:form-data="scope.row"
											@on-select="onSelectEmpChange($event, scope)"
										></remote-search-emp-input>
									</template>-->
								</vxe-table-column>
								<vxe-column title="岗位" align="left" field="postName" :width="100" />
								<vxe-column title="班组" align="left" field="groupName" :width="100" />
								<vxe-column title="请假原因" align="left" field="leaveTypeName" :width="140">
									<!--<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.leaveTypeName }}</span>
											<jk-select v-else v-model="scope.row.leaveTypeId" :option-list="causeList" size="mini"></jk-select>
										</div>
									</template>-->
								</vxe-column>
								<vxe-column title="请假时间" align="left" field="endDateTime" :width="290">
									<template slot-scope="scope">
										<span>{{ scope.row.startDateTime }} ~ {{ scope.row.endDateTime }}</span>
										<!--<span v-if="pageType === 'detail'">{{ scope.row.startDateTime }}~{{ scope.row.endDateTime }}</span>
										<el-date-picker
											v-else
											v-model="scope.row.dateTimeRange"
											type="datetimerange"
											style="width: 100%;"
											placeholder="请假时间"
											value-format="yyyy-MM-dd HH:mm:ss"
											class="width-100-percent"
											size="mini"
											@change="onDateTimeChange($event, scope)"
										></el-date-picker>-->
									</template>
								</vxe-column>
								<vxe-column title="请假天数" align="right" field="leaveDay" :width="80" />
								<vxe-column title="备注" align="left" field="remark" :width="250">
									<!--<template slot-scope="scope">
										<div class="flex-start-center">
											<span v-if="pageType === 'detail'">{{ scope.row.remark }}</span>
											<jk-input v-else v-model="scope.row.remark" class="width-100-percent" placeholder="" size="mini"></jk-input>
										</div>
									</template>-->
								</vxe-column>
							</jk-table>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</jk-card>
	</jk-view>
</template>

<script>
    import technologyOrder from './form-box-mixin';
    export default {
        name: 'TechnologyOrder',
        mixins: [technologyOrder],
        data() {
            return {};
        },
        methods: {

        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
    .box-title {
        height: 38px;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #2d8cf0;
        color: #fff;
        border: solid 1px #2d8cf0;
        border-bottom: none;
        margin-bottom: -1px;
        border-radius: 4px 4px 0 0;
    }
</style>
